<template>
	<view class="content">
		<view class="jia">
			
		</view>
		<scroll-view scroll-x="true" :show-scrollbar="false" class="fixd">
			<view>
				<view class="nav">
					<view
					@click="updateListClass(index)"
					 v-for="(item, index) in nav"
					 :class="[{'unlist': listindex === index},{'list': true}]"
					 :key="index"
					 >
						{{ item.name }}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="kong">
			<recommend v-if="showComponets === 'recommend'"></recommend>
			<seaside v-else-if="showComponets === 'seaside'"></seaside>
		</view>
		
		
	</view>
</template>

<script>
	import recommend from '../recommend/recommend.vue'
	import seaside from '../seaside/seaside.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				nav: [
					{
						name: '推荐'
					},
					{
						name: '海边'
					},
					{
						name: '树林'
					},
					{
						name: '文案'
					},
					{
						name: '感情'
					},
					{
						name: '冷漠'
					},
					{
						name: '日出'
					},
					{
						name: '日落'
					},
					{
						name: '陪伴'
					},
					{
						name: '相守'
					},
					{
						name: '温暖'
					}
				],
				listindex: 0,
				showComponets: 'recommend'
	
			}
		},
		methods: {
			// 标签切换
			updateNav(index) {
				const arry = ['recommend', 'seaside']
				this.showComponets = arry[index]
			},
			updateListClass(index) {
				this.listindex = index
				this.updateNav(index)
			}
		},
		components: {
			recommend,
			seaside
		}
	}
</script>

<style lang="scss">
	.fixd{
		position: fixed;
		z-index: 99;
	}
	.jia{
		width: 70rpx;
		height: 70rpx;
		background-image: url(../../static/tabbar/jia.png);
		background-size: 100%;
		background-position: center;
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		border: 6rpx solid #1396db;
		border-radius: 50%;
		box-sizing: border-box;
		z-index: 99;
	}
	.nav{
		display: flex;
		align-items: center;
		z-index: 99;
		background-color: #FFFFFF;
		width: 950rpx;
		.list{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80rpx;
			box-sizing: border-box;
			padding: 15rpx 45rpx;
			white-space:nowrap;
			font-size: 30rpx;
			font-weight: 700;
			border-radius: 30rpx;
			transition: all 0.5s;
		}
	}
	.unlist{
		background-color: skyblue;
		transform: scale(1.1);
		transition: all 0.5s;
	}
	.kong{
		padding-top: 77rpx;
		box-sizing: border-box;
		z-index: 1;
	}
</style>
